<template>
<div class="template_print">
    <div
        class="print"
        v-for="(item, index) in printData"
        :key="index"
    >
        <div class="title">{{ item.plantName }}</div>
        <div class="printText">
            <div class="status" v-if="item.isQualified">{{item.isQualified}}</div>
            <div class="customer" v-if="item.customerCode">{{item.customerCode}}</div>
            <div class="contentTop">
                <div class="content">物料号：{{ item.materialCode }}</div>
            </div>
            <div class="contentTop">
                <div class="content">物料名称：{{ item.materialName }}</div>
            </div>
            <div class="contentTop">
                <div class="content">规格：{{ item.spec }}</div>
                <div class="content">型号：{{ item.model }}</div>
            </div>
            <div class="contentTop">
                <div class="content">截面：{{ item.predefine1 }}</div>
                <div class="content">颜色：{{ item.predefine2 }}</div>
            </div>
            <div class="contentTop">
                <div class="content">数量({{item.tmUnitName}})：{{ item.materialQty}}</div>
                <div class="content">次单位({{item.tmSubunitsName}})：{{ item.weight}}</div>
            </div>
            <div class="contentTop">
                <div class="content">日期：{{item.reportDate}}</div>
                <div class="content">机台：{{ item.equipmentName }}</div>
            </div>
            <div class="contentTop">
                <div class="content">批号：{{ item.batchNo }}</div>
                <div class="content">报工人：{{ item.reportName }}</div>
            </div>
        </div>
        <div class="qrcode" :id="'qrcode_' + index"></div>
    </div>
</div>
</template>

<script>
import QRcode from "qrcodejs2";

export default {
    components: {},
    props: {
        printData: {
            type: Array,
            default () {
                return []
            }
        },
    },
    created() {},
    mounted() {},
    data() {
        return {};
    },
    methods: {
        qrcode() {
            this.printData.map((x, index) => {
                document.getElementById(`qrcode_${index}`).innerHTML = "";
                let qrcode = new QRcode(`qrcode_${index}`, {
                    width: 128,
                    height: 128,
                    text: `${x.barcode}`,
					correctLevel : QRcode.CorrectLevel.H
                });
            });
        },
    },
    watch: {
        printData: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    });
                }
            },
            immediate: true
        },
    },
};
</script>

<style lang="scss" scoped>
@page {
    size: 100mm 65mm !important;
	margin:2mm;
    overflow: hidden;
}

.print {
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	position: relative;
}
.qrcode{
	position:absolute;
	right:5px;
	bottom:5px;
    transform: scale(0.42);
    transform-origin: right bottom;
}
.printText{
	flex:1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    position:relative;
}
.printText .status{
    position:absolute;
    top:0;
    right:0;
    padding:2px 5px;
    font-size:8px;
    border:1px solid #333;
}
.printText .customer{
    position:absolute;
    top:0;
    right:40px;
    padding:2px 5px;
    font-size:8px;
    border:1px solid green;
}
.title {
    text-align: center;
    font-size: 20px;
    padding-bottom: 10px;
}

.contentTop {
    display: flex;
}

.content {
	flex:1;
	overflow: hidden;
    font-size: 10px;
    text-align: left;
    .black {
        font-weight: bold;
    }
}
</style>
